<template>
  <div class="inventory-batch-container">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane :label="pendingPageTile" name="pending">
        <pending-inventory-mgr-page />
      </el-tab-pane>
      <el-tab-pane :label="pageTitle" name="completed">
        <inventory-mgr-page ref="inventoryMgrPage" :inoutType="inoutType" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import PendingInventoryMgrPage from './pendingInventoryMgrPage.vue'
import InventoryMgrPage from './inventoryMgrPage.vue'
import { InventoryInOutType } from '../../public/engine/inventory/inventory'

export default {
  name: 'inOrders',
  components: {
    PendingInventoryMgrPage,
    InventoryMgrPage
  },
  data() {
    return {
      activeTab: 'pending', // Default to first tab
      inoutType: InventoryInOutType.In
    }
  },

  mounted() {
    console.log('InventoryBatchMgrPage mounted');

    // 读取路径参数

    let inoutParam = this.$route.params.type || this.$route.query.type;
    if (inoutParam && inoutParam == 'in') {
      this.inoutType = InventoryInOutType.In
    }
    else if (inoutParam && inoutParam == 'out') {
      this.inoutType = InventoryInOutType.Out
    }
  },

  computed: {
    pageTitle() {
      return this.inoutType === InventoryInOutType.In ? '入库单' : '出库单'
    },
    pendingPageTile() {
      return this.inoutType === InventoryInOutType.In ? '待入库单' : '待出库单'
    },
  },

  beforeUnmount() {
    //console.log('InventoryBatchMgrPage beforeUnmount');
    this.$refs.inventoryMgrPage.beforeUnmountFromParent();
  },


}
</script>

<style scoped>
.inventory-batch-container {
  padding: 20px;
}
</style>